<script setup>
// 先导入 声明响应式状态 钩子函数 自己的函数
import { ref,onMounted,useTemplateRef } from 'vue'
import LifeView from './LifeView.vue';
import RefTestView from './RefTestView.vue';


const titleRef = ref(null)
const testRef = useTemplateRef('test')
// 应该注意的是，ref 数组并不保证与源数组相同的顺序。
const liItemsRef = useTemplateRef('items')
const list = ref(["a","b","c"])

onMounted(()=>{
    console.log("titleRef=>",titleRef);
    titleRef.value.style.color="red"
    console.log("testRef=>",testRef);
    console.log("liItemsRef=>",liItemsRef);
    liItemsRef.value[0].style.color="blue"
    
    
})

const handleClick = ()=>{
    testRef.value.sayHello()
}

// SFC  sigle  file component






</script>

<template>
<div>
    <h1 ref="titleRef">RefView</h1>
    <!-- <RefTestView /> -->
    <RefTestView ref="test"></RefTestView>
    <button @click="handleClick">click</button>
    <LifeView />
    <ul>
        <li v-for="item in list" :key="item" ref="items">{{item}}</li>
    </ul>
    <DemoView  />
</div>
</template>

<style scoped>
</style>